<template>
  <form @submit.prevent="onSubmit">
    <h2 class="label-wrapper">
      <label for="new-todo-input" class="label__lg" style="font-size: 1.5rem">
        What needs to be done?
      </label>
    </h2>
    <input
      type="text"
      id="new-todo-input"
      name="new-todo"
      autocomplete="off"
      v-model.lazy.trim="label"
      class="input__lg" 
      placeholder="请输入要做的事项......"
      />
    <button type="submit" class="btn btn__primary btn__lg">Add</button>
  </form>
</template>

<script>
  export default {
    data() {
      return {
        label: "",
      };
    },
    methods: {
      onSubmit() {
        if(this.label === "") {
          alert("输入不能为空！");
          return;
        }
        this.$emit('todo-added', this.label);
        this.label = "";
      }

    },
  };
</script>

<style scoped>
input {
  padding: 10px;
  font-size: 1.5rem;

}
</style>